<template>
	<view class="container">
		<header-view type="second" rightShow>{{$t('个人中心')}}</header-view>
		<view class="content">
			<view class="account flex_between">
				<view class="detail flex" @tap="toSetting">
					<image class="avatar" :src="userInfo.avatar" mode=""></image>
					<view class="account_number">{{ userInfo.user }}</view>
				</view>
				<view class="btn" @tap="toRealName">
					<view class="inner">
						{{$t('前往实名认证')}}
					</view>
				</view>
			</view>
			<total-assets type="4"></total-assets>
			<!-- 充值提现 -->
			<view class="btns flex_between">
				<view class="btn" @tap="toRecharge">
					<view class="inner">{{$t('充值')}}</view>
				</view>
				<view class="btn" @tap="toWithdrawal">
					<view class="inner">{{$t('提现')}}</view>
				</view>
			</view>
			<view class="list">
				<view class="nav_item flex" v-for="item in list" @tap="toPath(item)">
					<image style="width: 36rpx;height: 38rpx;" :src="item.img"></image>
					<view class="name">
						{{item.name}}
					</view>
					<uni-icons type="forward" size="17" color="#9a96af"></uni-icons>
				</view>
			</view>
		</view>
		<tab-view id="5"></tab-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import tabView from "@/components/tabView/tabView.vue"
	import totalAssets from "@/components/totalAssets.vue"
	import {
		userInfoApi
	} from "@/api/api.js"
	export default {
		components: {
			tabView,
			totalAssets,
			headerView
		},
		data() {
			return {
				userInfo: [],

				list: [{
					name: this.$t('财务账户'),
					img: require("../../static/img/mine/menu1.png"),
					path: "/pages/bankCard/list"
				}, {
					name: this.$t('资金记录'),
					img: require("../../static/img/mine/menu2.png"),
					tab: "/pages/record/record"
				}, {
					name: this.$t('交易密码'),
					img: require("../../static/img/mine/menu3.png"),
					path: "/pages/setting/password?type=fund"
				}, {
					name: this.$t('登录密码'),
					img: require("../../static/img/mine/menu4.png"),
					path: "/pages/setting/password?type=login"
				}, {
					name: this.$t('货币兑换'),
					img: require("../../static/img/mine/menu5.png"),
					path: "/pages/setting/exchange"
				}, {
					name: this.$t('语言切换'),
					img: require("../../static/img/mine/menu5.png"),
					path: "/pages/setting/lang"
				}, {
					name: this.$t('客服中心'),
					img: require("../../static/img/mine/menu6.png"),
					path: "/pages/webview/webview"
				}, {
					name: this.$t('退出登录'),
					img: require("../../static/img/mine/menu7.png"),
					isLogout: true
				}]
			};
		},
		onShow() {
			this.getUserInfo()
		},

		methods: {
			toSetting() {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			toRealName() {
				uni.navigateTo({
					url: "/pages/setting/realName"
				})
			},
			toRecharge() {
				uni.navigateTo({
					url: "/pages/recharge/recharge"
				})
			},
			toWithdrawal() {
				uni.navigateTo({
					url: "/pages/withdrawal/withdrawal"
				})
			},
			toPath(opt) {
				if (opt.path) {
					uni.navigateTo({
						url: opt.path
					})
				} else if (opt.tab) {
					uni.switchTab({
						url: opt.tab
					})
				} else if (opt.isLogout) {
					uni.removeStorageSync("token")
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},

			getUserInfo() {
				/* const token = localStorage.getItem('token');
				let data={
					 token:token,
				} */
				userInfoApi().then(res => {
					this.userInfo = res.data.data
					console.log(res.data.data, "用户信息")
				}).catch(err => {
					console.error(err)
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: url(../../static/img/mine/bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top;
		background-color: #0a0b24;
		height: 100vh;

		.header {
			background: url(../../static/img/mine/bg.png);
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: bottom;
		}

		.content {
			padding: 0 24rpx;
			flex: 1;
			overflow: auto;

			.account {
				height: 230rpx;

				.detail {
					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						margin-right: 40rpx;
					}

					.account_number {
						font-size: 32rpx;
						font-weight: 400;
						color: #e9eaf0;
					}
				}

				.btn {
					height: 48rpx;
					line-height: 48rpx;
					background: #4c3d89;
					border-radius: 24rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #e9eaf0;
					padding: 0 2rpx;
					background: linear-gradient(0deg, #4c3d89, #fff, #4c3d89);
					border-radius: 12px;

					.inner {
						height: 48rpx;
						line-height: 48rpx;
						background: #4c3d89;
						border-radius: 24rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #e9eaf0;
						padding: 0 18rpx;
					}
				}
			}

			.btns {
				margin: 40rpx 0;

				.btn {
					width: 330rpx;
					height: 84rpx;
					padding: 2rpx;
					background: linear-gradient(0deg, #4c3d89, #fff, #4c3d89);
					border-radius: 40rpx;

					.inner {
						width: 100%;
						height: 100%;
						line-height: 80rpx;
						text-align: center;
						background: #0a0b24;
						border-radius: 40rpx;
						font-size: 36rpx;
						font-weight: 400;
						color: #fff;
					}
				}

				.btn:first-child {
					.inner {
						background: #4c3d89;
					}
				}
			}

			.list {
				padding-left: 4rpx;
				padding-bottom: 40rpx;

				.nav_item {
					height: 108rpx;

					.name {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;
						color: #9a96af;
						margin-left: 34rpx;
					}
				}
			}
		}
	}
</style>